<template>
	<el-dialog title="树洞-AI助手" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="true"
		:destroy-on-close="true" class="cyber-healing-chat">
		<div class="chat-history">
			<div v-for="(message, index) in chatHistory" :key="index"
				:class="[message.role === 'user' ? 'user-message' : 'ai-message']">
				<div class="message-bubble">
					<span class="message-content">{{ message.content }}</span>
				</div>
			</div>
		</div>
		<div class="input-container">
			<el-input type="text" v-model="newMessage" placeholder="别闷闷不乐了，来分享点美好事物吧，让心灵充满阳光！" class="message-input"
				:disabled="isSending" @keyup.enter.native="sendMessage">
				<template #append>
					<el-button icon="el-icon-send" :loading="isSending" @click="sendMessage">
						{{ isSending ? '发送中...' : '发送' }}
					</el-button>
				</template>
			</el-input>
		</div>
	</el-dialog>
</template>

<script>
	import {
		debounce
	} from "@/utils/common.js";
	import {
		postChatMessage
	} from '@/api/chat'; // 引入封装的 API 函数
	import {
		getInfo
	} from "@/api/dict";
	export default {
		data() {
			return {
				newMessage: '',
				chatHistory: [], // 聊天历史记录
				contextLength: 5, // 上下文长度配置
				dialogVisible: false, // 弹窗显示状态
				isSending: false,
			};
		},
		methods: {
			handledInit(flag = true) {
				this.dialogVisible = flag
			},
			sendMessage: debounce(async function() {
				if (!this.newMessage.trim()) return this.$message.warning("描述你的问题");
				this.isSending = true; // 设置为正在发送状态
				try {
					// 调用封装的 API
					const response = await postChatMessage(this.newMessage, this.contextLength);

					if (response.status === 'success') {
						// 更新聊天历史记录
						this.chatHistory = [
							...this.chatHistory,
							{
								role: 'user',
								content: this.newMessage
							},
							{
								role: 'assistant',
								content: response.message
							},
						];
						this.newMessage = '';
						// 更新上下文长度
						if (this.chatHistory.length > this.contextLength) {
							this.chatHistory = this.chatHistory.slice(this.chatHistory.length - this
								.contextLength);
						}
					} else {
						console.error('聊天请求失败:', response.message);
						this.$message.error("聊天请求失败" + response.message)
					}
				} catch (error) {
					console.error('网络错误或聊天接口请求失败:', error);
					this.$message.error('网络错误或聊天接口请求失败:' + error);
				} finally {
					this.isSending = false; // 重置发送状态
				}
			}),
		},
	};
</script>

<style scoped>
	.cyber-healing-chat {
		/* 赛博治愈风格背景 */
		--el-dialog-background: #f0f4ff;
		--el-dialog-border: 1px solid #e0e7ff;
		--el-dialog-header: #ffffff;
		--el-dialog-header-font-color: #404040;
		margin-top: 0;
	}

	.cyber-healing-chat :deep(.el-dialog) {
		margin-top: 0;
		background-image: linear-gradient(to top, #bdc2e8 0%, #bdc2e8 1%, #e6dee9 100%);
		border-radius: 8px;
	}

	.chat-history {
		min-height: 200px;
		height: 40vh;
		overflow-y: auto;
		padding: 20px;
		background: #ffffff;
		border-radius: 10px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
	}

	.message-bubble {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		padding: 10px;
		border-radius: 10px;
		max-width: 90%;
		word-wrap: break-word;
	}

	.user-message {
		background: #e0f7fa;
		/* 浅蓝色背景 */
		color: #000000;
		/* 黑色文字 */
		align-self: flex-end;
		/* 用户消息右对齐 */
	}

	.ai-message {
		background: #fff3e0;
		/* 浅黄色背景 */
		color: #000000;
		/* 黑色文字 */
		align-self: flex-start;
		/* AI 消息左对齐 */
	}

	.message-content {
		font-size: 14px;
		font-family: Arial, sans-serif;
		line-height: 1.5;
		white-space: pre-wrap;
		/* 允许自动换行 */
	}

	.input-container {
		display: flex;
		align-items: center;
		background: #ffffff;
		border-radius: 10px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.message-input {
		flex: 1;
		padding: 10px;
		border: none;
		outline: none;
		font-size: 14px;
		font-family: Arial, sans-serif;
	}

	.message-input::placeholder {
		color: #a0a0a0;
	}

	.el-button {
		flex: 1;
		background: #409EFF;
		/* Element UI 主题色 */
		color: #ffffff;
		border: none;
		border-radius: 5px;
		font-size: 14px;
		cursor: pointer;
	}

	.el-button:hover {
		background: #66b1ff;
	}

	/* 添加输入框禁用时的样式 */
	.message-input.is-disabled .el-input__inner {
		background-color: #f5f7fa;
		border-color: #e4e7ed;
		color: #c0c4cc;
		cursor: not-allowed;
	}

	/* 添加发送按钮禁用时的样式 */
	.el-button.is-disabled {
		background-color: #a0cfff;
		color: #ffffff;
		cursor: not-allowed;
	}

	/* 加载中的样式 */
	.el-button.is-loading {
		background-color: #66b1ff;
	}
</style>